<template>
  <div class="Bmi-wrp">
    <table>
      <tr
          v-for="(item , index) of statusData"
          :key="index"
          :style="{ backgroundColor: item.bg }"
      >
        <td><i v-if="currentData.status === item.key ? isBlock = true : isBlock = false"><svg t="1625562528102" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2386" width="20" height="20"><path d="M792.413 511.827l-48.76299999999999-48.79300000000001-0.20900000000000005 0.2069999999999999-463.0909999999998-463.1290000000001-48.763000000000005 48.762999999999984 463.0959999999999 463.12600000000003-463.0960000000001 463.1299999999998 48.76299999999999 48.75700000000001 512.0620000000001-512.0609999999998zM792.413 511.827z" p-id="2387" fill="red"></path></svg></i></td>
        <td style="width: 30%; text-align: left">{{item.key}}</td>
        <td style="width: 50%;">{{item.value}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
    name: "BmiStatus",
  data(){
      return {
        statusData: [
          { key: '分类', value: 'BMI 范围', bg: 'lightblue' },
          { key: '偏瘦', value: '<= 18.4', bg: 'gray' },
          { key: '正常', value: '18.5 ~ 23.9', bg: 'green' },
          { key: '过重', value: '24.0 ~ 27.9', bg: 'yellow' },
          { key: '肥胖', value: '>= 28.0', bg: 'orange' },
        ],
      }
  },
  props:{
    currentData:{
      type:Object,
      default:() => ({})
    }
  },
}
</script>

<style scoped lang="less">
@import "~_layui@2.6.8@layui/dist/css/layui.css";


.Bmi-wrp{
  text-align: center;
  margin: 0 auto;
  float: right;
  table{
    border: none;
    width: 300px;
    tr,td{
      height: 30px;
      line-height: 30px;
      border: none;
    }
  }
}

</style>